<template>
	<div class="work-experience">
		<div class="add-btn" v-if="editState == 0" @click="addOption"><img src="@/assets/me/up.png"><span>添加</span></div>
		<div class="title">工作经历</div>
		<div class="work-content" v-if="editState == 0 && form.workInfos.length>0">
			<div class="work-item flex" v-for="(items,index) in form.workInfos" :key="index">
				<div class="label">
					<div class="time">{{parseTime(new Date(items.startTime),'{y}-{m}')}} 至 {{parseTime(new Date(items.endTime),'{y}-{m}')}}</div>
					<div class="month-total">{{formatTimeTotal(new Date(items.startTime),new Date(items.endTime))}}</div>
				</div>
				<div class="line">
					<div class="dian"></div>
					<div class="line-box"></div>
				</div>
				<div class="item-val flex-item">
					<div class="item-title flex">
						<div class="flex-item">{{items.positionName}} | {{items.companyName}}</div>
						<div class="all-option transition-ease-in">
							<span class="all-option-edit" @click="editWork(index)">编辑</span>
							<span class="all-option-del" @click="delWork(index)">删除</span>
						</div>
					</div>
					<div class="item-text">{{items.workDesc}}</div>
				</div>
			</div>
		</div>
		<div class="work-content no-data" v-if="editState == 0 && form.workInfos.length==0">
			工作经历最能体现您丰富的阅历和出众的工作能力，是你薪酬翻倍的筹码哦！
		</div>
		<div class="work-edit" v-if="editState == 1">
			<div class="content">
				<el-form ref="form" :model="editForm" :rules="rules" label-width="85px" label-position="left" hide-required-asterisk="false">
					<div class="flex">
						<div class="edit-left flex-item">
							<div class="edit-item flex">
								<div class="red-dian"></div>
								<el-form-item label="公司名称：" class="flex-item" prop="companyName">
									<el-input v-model="editForm.companyName" placeholder="请输入公司名称"></el-input>
								</el-form-item>
							</div>
							<div class="edit-item flex">
								<div class="red-dian"></div>
								<el-form-item label="任职时间：" prop="startTime">
									<el-date-picker
										v-model ="editForm.workTime"
										type="monthrange"
										value-format="yyyy-MM"
										range-separator="至"
										start-placeholder="开始年月"
										end-placeholder="结束年月" @change="formatDateRang">
									</el-date-picker>
								</el-form-item>
							</div>
						</div>
						<div class="edit-right flex-item">
							<div class="edit-item flex">
								<div class="red-dian"></div>
								<el-form-item label="职位名称：" class="flex-item" prop="positionName">
									<el-input v-model="editForm.positionName" placeholder="请输入职位名称"></el-input>
								</el-form-item>
							</div>
						</div>
					</div>
					<div class="edit-item flex">
						<div class="red-dian"></div>
						<el-form-item class="flex-item" label="工作职责：" prop="workDesc">
							<el-input type="textarea" v-model="editForm.workDesc" maxlength="200" show-word-limit placeholder="请输入工作职责"></el-input>
						</el-form-item>
					</div>
				</el-form>
				<div class="form-option">
					<div class="save qida-success-btn" @click="saveEdit">保存</div>
					<div class="cancel qida-cancel-btn" @click="cancelEdit">取消</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {updateResumeWork} from '@/api/me/resume';
	export default {
		name:'work-experience',
		props:['resumeWorks'],
		data: function() {
			return {
				editState:0,//0:显示，1：编辑
				workIndex:0,
				form:{
					"resumeId": this.$route.query.id,
					"workInfos": this.resumeWorks
				},
				rules: {
					companyName: [{ required: true, trigger: "blur", message: "请输入公司名称" }],
					startTime: [{ required: true, trigger: "blur", message: "请选择任职时间" }],
					positionName: [{ required: true, trigger: "blur", message: "请输入职位名称" }],
					workDesc: [{ required: true, trigger: "blur", message: "请输入工作职责" }]
				},
				editForm:{
					resumeId : this.$route.query.id,
					companyName:'',
					positionName:'',
					workDesc:'',
					startTime:'',
					endTime:'',
					workTime:['',''],
					id: 0,
				},
				optionType:1
			}
		},
		watch:{
			resumeWorks(val){
				this.form.workInfos=val;
				this.form.resumeId=this.$route.query.id;
			}
		},
		methods: {
			saveEdit(){
				this.$refs.form.validate(valid => {
					if (valid) {
						this.editForm.resumeId = this.$route.query.id
						updateResumeWork(this.editForm).then(res => {
							if(res.resp_code == 0){
								this.$message.success('操作成功');
								this.editState=0;
							}else{

							}
							this.editForm.id = res.datas.id;
							this.form.workInfos[this.editForm.index] = this.editForm;
						}).catch(err => {
							this.$message.error(err);
						})
					}
				})
			},
			editWork(index){
				this.workIndex=index;
				this.editForm={
					id: this.form.workInfos[index].id,
					resumeId: this.$route.query.id,
					companyName:this.form.workInfos[index].companyName,
					positionName:this.form.workInfos[index].positionName,
					workDesc:this.form.workInfos[index].workDesc,
					startTime:this.form.workInfos[index].startTime,
					endTime:this.form.workInfos[index].endTime,
					workTime:[this.form.workInfos[index].startTime,this.form.workInfos[index].endTime],
					status: 1,
					index : index,
				}
				
				this.optionType=2;
				this.editState=1;
			},
			formatDateRang(val){
				// this.editForm.startTime=this.parseTime(val[0],'{y}-{m}')
				// this.editForm.endTime=this.parseTime(val[1],'{y}-{m}')

				this.editForm.startTime= val[0]
				this.editForm.endTime= val[1]

				this.$set(this.editForm,'workTime',val);
			},
			delWork(index){
				this.editForm.id = this.form.workInfos[index].id;
				this.editForm.resumeId = this.$route.query.id;
				this.editForm.status = 0;

				this.optionType=3;
				updateResumeWork(this.editForm).then(res => {
					if(res.resp_code == 0){
						this.$message.success('删除成功');
						this.form.workInfos.splice(index,1);
					}
				}).catch(err => {
					this.$message.error(err);
				})
			},
			addOption(){
				this.optionType == 1;
				var arr={
					schoolName:'',
					education:'',
					majorName:'',
					startTime:'',
					endTime:'',
					educationTime:['',''],
					id: 0
				}
				this.form.workInfos.push(arr);
				this.workIndex=this.form.workInfos.length-1;
				this.editForm=arr;
				this.optionType = 1;
				this.editState = 1;
			},
			cancelEdit(){
				if(this.optionType == 1){
					this.form.workInfos.splice(this.workIndex,1);
				}
				this.editState = 0
			}
		}
	}
</script>
<style lang="scss">
	.work-experience{
		width: 100%;
		position: relative;
		margin: 30px 0;
		.add-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #3EABC4;
			border-left:4px solid #3EABC4;
			text-indent: 10px;
		}
		.work-content .no-data{
			padding-left: 10px;
			margin-top: 40px;
		}
		.work-content{
			margin-top: 25px;
			color: #787878;
			width: 795px;
			.work-item{
				min-height: 30px;
				line-height: 30px;
				.all-option{
					margin-left: 20px;
					opacity: 0;
					pointer-events: none;
					span{
						color: #3EABC4;
						margin-left: 10px;
						cursor: pointer;
						font-weight: normal;
					}
				}
				.label{
					padding-right: 20px;
					text-align: right;
					width: 156px;
					.month-total{
						font-size: 12px;
						color: #BCBCBC;
					}
				}
				.line{
					width: 7px;
					position: relative;
					.dian{
						width: 7px;
						height: 7px;
						background: #D0D0D0;
						border-radius: 50%;
						position: absolute;
						top: 11px;
						left: 0;
					}
					.line-box{
						border-right: 1px solid #D0D0D0;
						height: 100%;
						width: 1px;
						margin-left: 3px;
					}
				}
				.item-val{
					padding-left: 20px;
					.item-title{
						color: #3EABC4;
						font-weight: bold;
					}
					padding-bottom: 40px;
				}
			}
			.work-item:hover{
				.all-option{
					opacity: 1;
					pointer-events:painted;
				}
			}
			.work-item:first-child{
				.line{
					.line-box{
						border-right: 1px solid #D0D0D0;
						height: 100%;
						width: 1px;
						margin-left: 3px;
						margin-top: 15px;
					}
				}
			}
			.work-item:last-child{
				.line{
					.line-box{
						border-right: 1px solid #D0D0D0;
						height: 100%;
						width: 1px;
						margin-left: 3px;
					}
				}
				.item-val{
					padding-bottom: 0px;
				}
			}
		}
		.work-edit{
			.content{
				margin-top: 25px;
				padding-bottom: 20px;
				.edit-left{
					padding-right: 80px;
					
				}
				.edit-right{
					padding-right: 40px;
					
				}
				.edit-item{
					
					.el-form-item{
						margin-bottom: 20px;
						.el-form-item__label{
							font-weight: normal;
							color: #777777;
						}
						.el-input__inner{
							border-radius: 0px;
						}
						.select-input{
							width: 100%;
						}
						.el-textarea{
							width: 765px;
						}
						.el-textarea__inner{
							border-radius: 0px;
							min-height: 120px !important;
						}
						
					}
					.red-dian{
						width: 5px;
						height: 5px;
						border-radius: 2.5px;
						background-color: #d92032;
						margin-right: 5px;
						margin-top: 16px;
					}
					.red-dian.hide{
						opacity: 0;
					}
				}
				.form-option{
					margin-top: 10px;
					padding-left: 10px;
					.save{
						margin-right: 15px;
					}
					
				}
			}
		}
	}
</style>
